<script lang="ts" setup>
import { ref,watch } from 'vue'
import { useRouter } from 'vue-router'
import { createExposeProxy } from '@/utils/exposeProxy'
import { useFaqButton } from "@/hook/useButton.ts"
import { mStyles } from "@/utils/useStyles";
import API from "@/service/api/order";
import { requestToast } from "@/utils/requestToast";
import { antiShake } from "@/utils/shake";
import { request } from "@/service/request";

const actionSheetRef = ref();

const props = defineProps<{
    orderData: {
        order_num?: string;
        finishTime?: string;
        [key: string]: any;
    }
}>();

const mRouter = useRouter();

//切换按钮
const { btnStyle, selectBtn } = useFaqButton();
const mRate = ref(false);
const mScore = ref<number>();

const emit = defineEmits(['is-Confirm'])
const clkLbuttonl = () => {
    selectBtn('l');
    // 超24小时，工单结束点击任何地方都显示评分
    if (props.orderData.order_status == 'close') {
        mRate.value = true;
    } else {
        mRate.value = true;
    }
};
const clkLbuttonr = () => {
    selectBtn('r');

    if (props.orderData.order_status == 'close') {
        mRate.value = true;
    } else {
        //重新提交工单
        mRouter.push({
            path: '/restart',
            query: {
                order_num: props.orderData.order_num,
                game_id: props.orderData.game_id,
                game_name: props.orderData.game_name,
                server_name: props.orderData.server_name,
                role_name: props.orderData.role_name,
            },
        });
        mRate.value = false;
    }
};


// 评价提交
const handleSubmit = antiShake(async () => {
    if (mScore.value != undefined) {
        const { status } = await requestToast({ order_num: props.orderData.order_num, score: mScore.value }, API.orderAppraise, "感谢你的评价")
        if (status) {
            emit('is-Confirm');
            //用户处理了
            clkUserHandle();
        }
        emit('is-Confirm');
    }else{
        showToast("请选择评价分数")
    }
}, 500);

//用户处理
const clkUserHandle = async () => {
    await request.post(API.orderHandle, { order_num: props.orderData.order_num, is_handle: 1 })
};


//未评分按钮变灰
const mSubmit = ref(true);

watch(
    () => mScore.value,
    () => {
        if(mScore.value != undefined){
            mSubmit.value = false;
        }
    },
);

//暴露方法
defineExpose(createExposeProxy({}, actionSheetRef))
</script>

<template>
    <cVanActionSheet ref="actionSheetRef" :iClose="true" :iButton="false" v-bind="$attrs" class="gr-evaluate"
        iPadding="15px 15px 30px 15px">
        <h2 class="text-[34px] color-[#3D3D3D]">你的问题是否已解决</h2>
        <div class="gr-evaluate-button m-t-[50px]">
            <cButton round :iColor="btnStyle('l').value.color" iHeight="9.375vmin" class="w-[319px] font-medium"
                :iBgColor="btnStyle('l').value.bgcolor" iFontSize="3.646vmin" @click="clkLbuttonl"
                :hairline="btnStyle('l').value.hairline">
                已解决
            </cButton>
            <cButton :iColor="btnStyle('r').value.color" :iBgColor="btnStyle('r').value.bgcolor"
                :hairline="btnStyle('r').value.hairline" iHeight="9.375vmin" iFontSize="3.646vmin"
                class="w-[319px] font-medium" round @click="clkLbuttonr">
                {{ props.orderData.order_status == 'close' ? '未解决' : '未解决，提交问题' }}
            </cButton>
        </div>
        <div class="gr-evaluate-rate" v-show="mRate">
            <h2 class="text-[26px] color-[#3D3D3D60]/60 font-normal">请你对专属客服的服务满意度评分</h2>
            <van-rate v-model="mScore" size="5vmin" :color="mStyles?.color1" void-icon="star" void-color="#eee" />
            <cButton @click="handleSubmit" round iLinearGradien iColor="white" class="w-[100%] m-t-[25px]" :disabled="mSubmit">
                提交
            </cButton>
        </div>
    </cVanActionSheet>
</template>

<style lang="scss" scoped>
.gr-evaluate {
    h1 {
        font-size: calc($fontSize + 20px);
        font-weight: 600;
    }

    h2 {
        margin-top: 40px;
    }

    .gr-evaluate-button {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }

    .gr-evaluate-rate {
        h2 {
            margin-top: 60px;
        }
    }
}
</style>